<template>
  <view>

    <view class="page">
      <view class="box_1">
        <view class="body">
          <view class="text-group_2">
            <text lines="1" class="paragraph_1">您好，</text>
            <text lines="1" class="paragraph_1">欢迎来到速裁通</text>
            <text lines="1" class="text_1">区块链电子签约平台</text>
          </view>
          <view class="box_13">
            <view class="group_1" :class="condition?'or':''" @click="switchover(true)"></view>
            <text lines="1" class="text_2" @click="switchover(true)">个人</text>
            <view class="group_2" :class="condition?'':'or'" @click="switchover(false)"></view>
            <text lines="1" class="text_3" @click="switchover(false)">企业</text>
          </view>
          <view class="text-wrapper_1">
            <!-- input框 -->
            <input class='zh' type="text" placeholder="请输入手机号" maxlength="11" v-model="phone" />
          </view>
          <view class="box_14">
            <view class="text-wrapper_2">

              <!-- input框 -->
              <input class='zh1' type="text" placeholder="请输入验证码" maxlength="6" v-model="code" />
            </view>
            <button bindtap="onClick" class="text-wrapper_3" @click="getNoteInfo()"
              :style="number!=''?'pointer-events: none;':''">
              <text lines="1" class="text_6">{{number}}获取验证码</text>
            </button>
          </view>
          <view class="group_3">

            <!-- input框 -->
            <view v-if="orShow1" style="display: flex;">
              <input class='zh' type="password" placeholder="8-16位数字、字母组合密码" maxlength="16" v-model="password">
              <image src="/static/yj.png" class="image_5" @click="mi"></image>
              </input>
            </view>

          <view v-else style="display: flex;">
            <input class='zh' type="text" placeholder="8-16位数字、字母组合密码" maxlength="16"
              v-model="password">
              <image src="/static/show.png" class="image_5" @click="mi"></image>
              </input>
          </view>


          </view>
          <view class="group_4">
            <view v-if="orShow2" style="display: flex;">
              <input class='zh' type="password" placeholder="再次确认密码" maxlength="16" v-model="confirmPassword" />
              <image src="/static/yj.png" class="image_6" @click="mi2"></image>
            </view>

            <view v-else style="display: flex;">
              <input class='zh' type="text" placeholder="再次确认密码" maxlength="16" v-model="confirmPassword" />
              <image src="/static/show.png" class="image_6" @click="mi2"></image>
            </view>

          </view>
          <view class="text-wrapper_4">
            <text class="text_9" @click="register()">注&nbsp;册</text>
          </view>


          <text lines="1" decode="true" class="text_10" @click="toLogin()">已有账号&nbsp;立即登录</text>
          <view class="box_15">
            <view class="group_5" :class="consent?'or':''" @click="consent=!consent"></view>
            <text lines="1" class="text_11">本人已认真阅读，理解并同意《用户协议》和《隐私协议》</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    checkMobile,
    checkPassword,
    checkCode,
  } from "@/common/util/verify.js"
  import {
    mapState
  } from "vuex"
  export default {
    data() {
      return {

        condition: false, //切换企业与个人
        consent: true, //是否同意协议
        orShow1: true, //密码眼睛切换
        orShow2: true, //确认密码眼睛切换
        number: '', //倒计时60秒
        phone: '', //手机
        code: '', //验证码
        password: '', //密码
        confirmPassword: "", //确认密码
        modify: null
      }
    },
    onLoad(object) {
      this.modify = object.modify
    },
    methods: {
      mi() {
        this.orShow1 = !this.orShow1
      },
      mi2() {
        this.orShow2 = !this.orShow2
      },
      toLogin() {
        uni.redirectTo({
          url: '../login_password/login_password'
        })
      },
      //个人与企业的切换
      switchover(val) {
        console.log(val)
        this.condition = val
      },
      //验证码
      async getNoteInfo() {
        //校验手机号
        let verifyResult = await checkMobile(this.phone)
        if (!verifyResult) {
          let title = '手机号有误!'
          uni.$showMsg(title)
        } else {
          this.$store.dispatch('login/getNoteInfo', this.phone)
          this.number = 60
          //倒计时
          let interval = setInterval(() => {
            this.number--
            if (this.number == 0) {
              console.log(1)
              this.number = ''
              clearInterval(interval)
            }
          }, 1000)
        }

      },
      async register() {
        //校验手机号
        let verifyResult = await checkMobile(this.phone)
        //校验验证码
        let codeResult = await checkCode(this.code)
        //校验密码
        let passwordResult = await checkPassword(this.password)


        if (!this.consent) {
          let title = '是否同意协议!'
          uni.$showMsg(title)
        } else {
          if (!verifyResult && !codeResult && !passwordResult) {
            let title = '错误!'
            uni.$showMsg(title)
          } else {
            if (this.password == this.confirmPassword) {
              if (this.modify == 'password') {
                //忘记密码
                //整理参数
                let params = {
                  userType: this.condition ? 'mobile' : 'manage', //个人或企业
                  smsCode: this.code,
                  uuid: this.newUuid,
                  phone: this.phone,
                  password: this.confirmPassword,
                  modify: "password",

                }
                try {
                  await this.$store.dispatch('login/modifyPassWrod', params)
                  let title = '修改成功!'


                  uni.$showMsg(title)
                  uni.redirectTo({
                    url: '../login_password/login_password'
                  })
                } catch (e) {
                  let title = e.message
                  uni.$showMsg(title)

                }


              } else {
                //注册
                //整理参数
                let params = {

                  loginFrom: this.condition ? 2 : 1, //1企业,2个人
                  phone: this.phone, //手机号
                  passwordStr: this.password, //密码
                  verificationCode: this.code, //验证码
                  verificationUUid: this.newUuid, //验证吗uuid
                }
                try {
                  await this.$store.dispatch('login/register', params)
                  let title = '注册成功!'
                  uni.$showMsg(title)
                  console.log('去登录')
                  uni.redirectTo({
                    url: '/subpkg/login_password/login_password'
                  })
                } catch (e) {
                  let title = e.message
                  uni.$showMsg(title)
                }
              }
            } else {
              let title = '密码不一致!'
              uni.$showMsg(title)
            }


          }
        }


      }

    },
    computed: {
      ...mapState({
        newUuid: state => state.login.uuid,
      }),
    }
  }
</script>

<style scoped>
  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1478rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .box_1 {
    height: 1478rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/%E8%83%8C%E6%99%AF.png?sign=76002dd2ea34284bd676fc4105c78804&t=1659334514) 100% no-repeat;
    background-size: 100% 100%;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .header {
    width: 750rpx;
    height: 135rpx;
    display: flex;
    flex-direction: column;
  }

  .section_3 {
    width: 690rpx;
    height: 24rpx;
    flex-direction: row;
    display: flex;
    margin: 31rpx 0 0 30rpx;
  }

  .label_1 {
    width: 40rpx;
    height: 24rpx;
  }

  .label_2 {
    width: 38rpx;
    height: 24rpx;
    margin-left: 16rpx;
  }

  .image_1 {
    width: 110rpx;
    height: 24rpx;
    margin-left: 187rpx;
  }

  .image_2 {
    width: 60rpx;
    height: 20rpx;
    margin-left: 181rpx;
  }

  .section_1 {
    width: 43rpx;
    height: 20rpx;
    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e8714bb7a3904f04b70dec1229722624_mergeImage.png) 100% no-repeat;
    background-size: 100% 100%;
    margin-left: 15rpx;
    display: flex;
    flex-direction: column;
  }

  .nav-bar_1 {
    width: 749rpx;
    height: 83rpx;
    flex-direction: row;
    display: flex;
    margin: 15rpx 0 18rpx 0;
  }

  .image_3 {
    width: 20rpx;
    height: 35rpx;
    margin: 21rpx 0 0 31rpx;
  }

  .box_4 {
    border-radius: 28rpx;
    width: 170rpx;
    height: 56rpx;
    border: 2px solid rgba(255, 255, 255, 1);
    flex-direction: row;
    display: flex;
    margin: 9rpx 29rpx 0 499rpx;
  }

  .image_4 {
    width: 61rpx;
    height: 33rpx;
    margin: 13rpx 0 0 28rpx;
  }

  .section_2 {
    width: 33rpx;
    height: 33rpx;
    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e874b4f1d8cf4656953b1812ab0ea16e_mergeImage.png) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 14rpx 18rpx 0 30rpx;
  }

  .body {
    width: 750rpx;
    height: 1199rpx;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .text-group_2 {
    width: 346rpx;
    height: 159rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 92rpx 0 0 207rpx;
  }

  .paragraph_1 {
    width: 346rpx;
    height: 118rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 48rpx;
    font-family: SimHei;
    text-align: center;
    line-height: 72rpx;
  }

  .text_1 {
    width: 213rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 18rpx 0 0 68rpx;
  }

  .box_13 {
    width: 205rpx;
    height: 24rpx;
    flex-direction: row;
    display: flex;
    margin: 45rpx 0 0 90rpx;
  }

  .group_1 {
    border-radius: 50%;
    width: 20rpx;
    height: 20rpx;
    border: 1rpx solid rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
  }

  .text_2 {
    width: 42rpx;
    height: 21rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 22rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 22rpx;
    margin: 3rpx 0 0 12rpx;
  }

  .group_2 {
    border: 1rpx solid rgba(255, 255, 255, 1);

    border-radius: 50%;
    width: 22rpx;
    height: 22rpx;
    margin-left: 51rpx;
    display: flex;
    flex-direction: column;
  }

  .text_3 {
    width: 44rpx;
    height: 20rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 22rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 22rpx;
    margin: 3rpx 0 0 12rpx;
  }

  .text-wrapper_1 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 570rpx;
    margin: 67rpx 0 0 90rpx;
  }

  .text_4 {
    width: 156rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 31rpx 0 0 37rpx;
  }

  .box_14 {
    width: 570rpx;
    height: 87rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 32rpx 0 0 90rpx;
  }

  .text-wrapper_2 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 350rpx;
  }

  .text_5 {
    width: 156rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 30rpx 0 0 36rpx;
  }

  .text-wrapper_3 {
    background-color: rgba(205, 173, 102, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    /* margin-top: 1rpx; */
    display: flex;
    justify-content: center;
    width: 200rpx;

  }

  .text_6 {
    width: 100%;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: center;
    white-space: nowrap;
    line-height: 86rpx;
    /* margin: 30rpx 0 0 0; */

  }

  .group_3 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    width: 570rpx;
    height: 86rpx;
    flex-direction: row;
    display: flex;
    margin: 32rpx 0 0 90rpx;
  }

  .text_7 {
    width: 311rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 35rpx 0 0 36rpx;
  }

  .image_5 {
    width: 41rpx;
    height: 36rpx;
    margin: 35rpx 0 0 30rpx;
  }

  .group_4 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    width: 570rpx;
    height: 86rpx;
    flex-direction: row;
    display: flex;
    margin: 32rpx 0 0 90rpx;
  }

  .text_8 {
    width: 155rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 32rpx 0 0 35rpx;
  }

  .image_6 {
    width: 41rpx;
    height: 31rpx;
    /* margin: 32rpx 37rpx 0 302rpx; */
    margin: 35rpx 0 0 30rpx;
  }

  .text-wrapper_4 {
    background-color: rgba(196, 176, 129, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 570rpx;
    margin: 46rpx 0 0 90rpx;
  }

  .text_9 {
    width: 89rpx;
    height: 34rpx;
    webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: SimHei;
    text-align: center;
    white-space: nowrap;
    line-height: 36rpx;
    margin-left: 240rpx;
    margin-top: 28rpx;
  }

  .text_10 {
    width: 184rpx;
    height: 21rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 22rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 22rpx;
    margin: 32rpx 0 0 286rpx;
  }

  .box_15 {
    width: 487rpx;
    height: 19rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin-top: 58rpx;
    margin-left: 15%;
  }

  .or {
    background-color: rgba(205, 173, 102, 1.000000);
  }

  .group_5 {

    border-radius: 50%;
    width: 16rpx;
    height: 16rpx;
    display: flex;
    flex-direction: column;
    border: 1rpx solid #fff;

  }

  .text_11 {
    width: 465rpx;
    height: 19rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 20rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 25rpx;
  }

  .zh {
    margin-left: 37rpx;
    margin-top: 20rpx;
    width: 422rpx;
  }

  .zh1 {
    margin-left: 37rpx;
    margin-top: 20rpx;
    width: 300rpx;
  }
</style>
